<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击查询按钮之后，获取文本框的值，并通过淘宝搜索商品</p>
    <input type="search" class="search">
    <button class="btn1">查询</button>
    <ul class="ul">
        <li>咖啡机</li>
        <li>咖啡杯</li>
        <li>咖啡豆</li>
    </ul>
</body>
<script>
    let btn1 = document.querySelector(".btn1");
    let search = document.querySelector(".search");

    let lis = document.querySelectorAll(".ul>li");

    // 遍历，添加事件处理函数
    for (let v of lis) {
        v.addEventListener("click",function() {
            // 获取标签内容
            // let value = v.innerHTML;
            // innerHTML：包含了HTML标签，如果设置时也会解析HTML标签
            // innerText：不包含HTML标签，设置时把HTML标签字符串，作为普通字符串
            let value = v.innerText;
            search.value = value;
        })
    }

    
    
    
    
    // 采用addEventListenr的方式绑定点击事件，第二个参数采用匿名函数来定义事件处理函数
    btn1.addEventListener("click",function() {
        //  DOM对象的value属性：获取输入框的输入内容
        // alert(search.value);

        let value = search.value;
        let url = "https://s.taobao.com/search?q=" + value;
        // 跳转页面
        window.location = url;
    })

</script>
</html>